export default {
  data() {
    return {
      enableBgAction: false,
      positions: []
    }
  },
  mounted() {
    if (this.layoutData.bg) {
      this.startListening()
    }
  },
  beforeDestroy() {
    if (this.layoutData.bg) {
      this.stopListening()
    }
  },
  methods: {

    /**
     * 获取所有图表的position
     */
    getPosition() {
      const doms = document.querySelectorAll('.dom-touchable')

      this.positions = []
      for (let i = 0; i < doms.length; i++) {
        const pos = doms[i].getBoundingClientRect()
        console.log(doms[i])
        this.positions.push({
          dom: doms[i].className,
          width: [pos.left, pos.right],
          height: [pos.top, pos.bottom]
        })
      }
    },
    /**
     * 监听鼠标事件
     * @param e 鼠标位置
     * 当鼠标位于图表中时，将图表置为活跃，即移除 map 的 pointer-events 属性
     */
    mouseMove(e) {
      const mouseInChart = this.positions.map(item => 'false')
      this.positions.forEach((item, index) => {
        if (e.clientX < item.width[1] &&
          e.clientX > item.width[0] &&
          e.clientY < item.height[1] &&
          e.clientY > item.height[0]) {
          mouseInChart[index] = 'true'
        } else {
          mouseInChart[index] = 'false'
        }
      })
      if (mouseInChart.includes('true')) {
        this.enableBgAction = false
      } else {
        this.enableBgAction = true
      }
    },
    // 开始监听鼠标
    startListening() {
      this.getPosition()
      window.addEventListener('mousemove', this.mouseMove)
      window.addEventListener('resize', this.getPosition)
    },
    // 停止监听鼠标
    stopListening() {
      window.removeEventListener('mousemove', this.mouseMove)
      window.removeEventListener('resize', this.getPosition)
    }
  }
}
